<template>
  <div class="hot-search">
    <h3>热门搜索</h3>
    <div class="hot-list">
      <div
        @click="hotListClick(item.first)"
        class="hot-list-item"
        v-for="(item,index) in hotList"
        :key="index"
      >{{item.first}}</div>
    </div>
  </div>
</template>

<script>
import { request } from "@/network";
export default {
  data() {
    return {
      hotList: [],
    };
  },
  created() {
    // 获取热门搜索
    this.getHotSearch();
  },
  methods: {
    // 获取热门搜索
    getHotSearch() {
      request({
        url: "/search/hot",
      }).then(
        (res) => {
          this.hotList = res.result.hots;
        },
        (err) => {}
      );
    },
    // 热门搜索点击
    hotListClick(value) {
      this.$emit("hotListClick", value);
    },
  },
};
</script>

<style scoped>
.hot-search h3 {
  font-size: 12px;
  line-height: 12px;
  color: #666;
  font-weight: 400;
  margin: 0;
  padding: 0;
}
.hot-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-around;
  height: 160px;
}
.hot-list-item {
  height: 32px;
  padding: 0 14px;
  line-height: 32px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-color: #d3d4da;
  border-radius: 32px;
}
</style>